<template>
  <div>
    <Window @close="close" @confirm="close">
      <el-scrollbar v-if="blogDetail" class="main">
        <div class="info">
          <div class="title">{{ blogDetail.title }}</div>
          <div class="detaile">
            <div>
              <el-tag effect="dark" round type="warning">作者</el-tag>
              {{ blogDetail.nickName }}
            </div>
            <div>
              <el-tag effect="dark" round type="success">分类</el-tag>
              {{ blogDetail.categoryName }}
            </div>
            <div>
              <el-tag effect="dark" round type="info">最后更新</el-tag>
              {{ blogDetail.lastUpdateTime }}
            </div>
            <div>
              <el-tag effect="dark" round>编辑器-{{
                blogDetail.editorTypeName
              }}</el-tag>
            </div>
          </div>
        </div>
        <div class="content" v-html="blogDetail.content"></div>
      </el-scrollbar>
    </Window>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance()
// 关闭窗口
const emit = defineEmits();
const close = () => {
  emit("close");
};
// 博客内容
const blogDetail = ref();
// 初始化
const getDetail = async (blogId) => {
  
  let result = await proxy.Request({
    url: "/blog/getBlogById",
    params: {
      blogId: blogId
    }
  })
  if (!result) {
    proxy.$message.error('获取博客详情失败')
    return;
  }
  blogDetail.value = result.data;
};
// 暴露getDetail
defineExpose({ getDetail });
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  flex-direction: column;
  margin: 10px 0;
  height: calc(100vh - 234px);
  border: 1px dashed rgb(167, 166, 166);
  border-radius: 15px;

  .info {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;

    .title {
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 30px;
    }

    .detaile {
      margin: 10px 0;
      width: 60%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
    }
  }

  .content{
    padding: 20px;
  }
}
</style>